<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务器错误 - 个人云笔记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.js">
    <script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.js"></script>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center">
    <div class="max-w-md w-full mx-auto text-center">
        <div class="mb-8">
            <i data-lucide="server-crash" class="w-24 h-24 mx-auto text-red-400 mb-4"></i>
            <h1 class="text-6xl font-bold text-gray-900 mb-2">5xx</h1>
            <h2 class="text-2xl font-semibold text-gray-700 mb-4">服务器错误</h2>
            <p class="text-gray-600 mb-8">
                抱歉，服务器遇到了一个错误，无法完成您的请求。我们正在努力修复这个问题。
            </p>
        </div>
        
        <div class="space-y-4">
            <button onclick="refreshPage()" 
                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition duration-200">
                <i data-lucide="refresh-cw" class="w-4 h-4 inline mr-2"></i>
                刷新页面
            </button>
            
            <button onclick="goBack()" 
                    class="w-full bg-gray-600 hover:bg-gray-700 text-white font-medium py-3 px-6 rounded-lg transition duration-200">
                <i data-lucide="arrow-left" class="w-4 h-4 inline mr-2"></i>
                返回上一页
            </button>
            
            <a href="/" 
               class="block w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg transition duration-200">
                <i data-lucide="home" class="w-4 h-4 inline mr-2"></i>
                返回首页
            </a>
        </div>
        
        <div class="mt-8 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
            <div class="flex items-start">
                <i data-lucide="info" class="w-5 h-5 text-yellow-600 mt-0.5 mr-3 flex-shrink-0"></i>
                <div class="text-sm text-yellow-800">
                    <p class="font-medium mb-1">可能的解决方案：</p>
                    <ul class="list-disc list-inside space-y-1">
                        <li>等待几分钟后重试</li>
                        <li>检查网络连接</li>
                        <li>清除浏览器缓存</li>
                        <li>联系系统管理员</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="mt-6 text-sm text-gray-500">
            <p>错误时间: <span id="errorTime"></span></p>
            <p>如果问题持续存在，请联系技术支持。</p>
        </div>
    </div>

    <script>
        // 初始化图标
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();
            
            // 显示错误时间
            document.getElementById('errorTime').textContent = new Date().toLocaleString('zh-CN');
        });

        // 刷新页面
        function refreshPage() {
            window.location.reload();
        }

        // 返回上一页
        function goBack() {
            if (window.history.length > 1) {
                window.history.back();
            } else {
                window.location.href = '/';
            }
        }

        // 自动刷新（可选）
        let autoRefreshTimer;
        let countdown = 30;

        function startAutoRefresh() {
            const refreshButton = document.querySelector('button[onclick="refreshPage()"]');
            const originalText = refreshButton.innerHTML;
            
            autoRefreshTimer = setInterval(() => {
                countdown--;
                refreshButton.innerHTML = `<i data-lucide="refresh-cw" class="w-4 h-4 inline mr-2"></i>自动刷新 (${countdown}s)`;
                
                if (countdown <= 0) {
                    clearInterval(autoRefreshTimer);
                    refreshPage();
                }
            }, 1000);
            
            // 点击任何按钮时取消自动刷新
            document.addEventListener('click', () => {
                if (autoRefreshTimer) {
                    clearInterval(autoRefreshTimer);
                    refreshButton.innerHTML = originalText;
                    lucide.createIcons();
                }
            }, { once: true });
        }

        // 5秒后开始自动刷新倒计时
        setTimeout(startAutoRefresh, 5000);
    </script>
</body>
</html>